<template>
	<div class="myConcern">
		<ul>
			<Loadmore
				:bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                ref="loadmore"
                :autoFill="false"
            >
            <div class='mc' v-if="list.length<1">
                <div>
                        <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
                        <p>暂无动态!</p>
                </div>
            </div>
	  		<li v-for="(item,index) in list" :key='index' v-if="list.length>0">
	  			<a>
	  			    <p>
		             	<img :src="item.pic?item.pic:''" width="45" height="45" alt="">
		            </p>
		            <div>
		           		<!-- <h3>{{item.username?item.username:''}}</h3> -->
		           		<h3>123</h3>
		            </div>
	  			</a>
	  			<div>

	  				<a href="javascript:;" @click='cancelConcern(item.userid)'>取消关注</a>
	  			</div>
	  		</li>
	  		</Loadmore>
  		</ul>
	</div>
</template>
<script>
	import {Loadmore} from 'mint-ui';
	export default {
		data() {
			return {
				list: [],
				userid: '',
				sentPage: {
					page: 1,
					rows: 10
				},
				allLoaded: false,
				totalNum: 0, 	//总数据条数
			}
		},
		components: {
			Loadmore
		},
		methods: {
			//获取关注老师列表
            getConcernCourse(params) {
                this.allLoaded = false;
                this.userid = localStorage.getItem("loginMobile");
                // 第一个参数是root--baseurl
                this.$api.post(this.$api.baseURLSchool,"selecttype/attention/0?type=fans&userid="+this.userid,params,r => {
                    this.totalNum = r.data.records;
                    console.log('9996',r.data)
					if(this.sentPage.page==1) {
                        this.list = r.data.rows;
                        
					}else {
						this.list = this.list.concat(r.data.rows);
					}
					if(r.data.rows.length == 0 && this.sentPage.page > 1) {
						this.$utils._toast("暂无更多数据");
                    }
                    if(this.totalNum == this.list.length) {
                        this.allLoaded = true;
                    }
					var that = this;
					this.list.forEach(function(item,index) {
						//根据tid获取老师表详情
						that.$api.get(that.$api.baseURLSchool,"select_cid/user/"+item.id,{},r => {
							that.$set(that.list,index,Object.assign(r.data.info,that.list[index]));
						},err =>  {
							console.log(err);
						})
					});
                },err => {
                    console.log(err);
                })
            },
            //取消关注
            cancelConcern(tid) {
                this.$api.post(this.$api.baseURLSchool,"play_cancel/attention?userid="+localStorage.getItem("loginMobile")+"&type=fans&id="+tid,{},r => {
                    if(r.data.ret1 == 1) {
                        this.$utils._toast("取消关注成功");
                        //更新关注列表
                        this.sentPage.page = 1;
                        this.getConcernCourse(this.sentPage);
                    }
                },err => {
                  console.log(err);
                })
            },
            //下拉刷新
			loadTop() {
				this.sentPage.page =1;
			  	setTimeout(() => {
		        	this.getConcernCourse(this.sentPage);
		        }, 20);
			  	this.$refs.loadmore.onTopLoaded();
			},
			//上拉加载
			loadBottom() {
				(this.sentPage.page)++;
		        setTimeout(() => {
		        	this.getConcernCourse(this.sentPage);
		        }, 20);
		        if(this.totalNum == this.list.length) {
					this.allLoaded = true;
		        }
				this.$refs.loadmore.onBottomLoaded();
			},
		},
		created() {
            this.getConcernCourse(this.sentPage);
		}
	}
</script>
<style lang="scss" scoped>
    .mc {
        padding: 40px 0;
        img {
            display: block;
            margin: 0 auto;
            width: 110px !important;
            height: 143px;
        }
        p {
            padding-top: 10px;
            text-align: center;
        }
    }
</style>
